/**
* 物料需求申请-编制
*/
<template>
   <div class="p10">
        <el-tabs type="border-card">
            <el-tab-pane>
                <template #label><vp-label zh="基本信息" en="Basic Info" /></template>
                <MaterialDemand ref="commRef" :loading="loading" :type="type" 
                :enableValid="isProcessCompleted">
                </MaterialDemand>
            </el-tab-pane>
            <el-tab-pane v-if="formData.processInsId">
                <template #label><vp-label zh="流程记录" en="Process Record" /></template>
                <ProcessHistory :processInsId="formData.processInsId" />
            </el-tab-pane>
            <el-tab-pane v-if="formData.processInsId">
                <template #label><vp-label zh="流程图" en="Process Chart" /></template>
                <ProcessView :processInsId="formData.processInsId" />
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="操作记录" en="Operation Record" /></template>
                <VpOperationRecordCard :id="formData.id" ref="rcListRef"></VpOperationRecordCard>
            </el-tab-pane>
        </el-tabs>
        <StatusBar :id="formData.id" :status="formData.zt" :isValid="formData.yxbs" />
        <PageBottom>
            <VpProcessToolBar 
                :showCancel="true"
                :showReject="false"
                :process-ins-id="processInsId" 
                :task-id="taskId" 
                :loading="saveLoading" 
                :before-show-fn="beforeShowFn"
                :after-agree-fn="afterAgreeFn"
                :set-loading-fn="(_loading: boolean) => { saveLoading = _loading }"
            />
        </PageBottom>
    </div>
</template>
<script setup lang="ts" name="processMaterialDemand4Reedit">
import { ref, onMounted, nextTick } from 'vue';
import request from '/@/utils/request';
import MaterialDemand from './materialDemand.vue';
import PageBottom from '/@/components/vp/PageBottom/index.vue';
import { ElMessage } from "element-plus";
import { useRoute } from 'vue-router';
import mittBus from '/@/utils/mitt';
import StatusBar from '/@/components/vp/status/StatusBar.vue';

import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from '/@/components/vp/workflow/ProcessView.vue';
import VpOperationRecordCard from '/@/components/vp/operationRecord/VpOperationRecordCard.vue';
import VpProcessToolBar from '/@/components/vp/workflow/VpProcessToolBar.vue';


const props = defineProps<{
    processInsId: string,
    taskId: string,
    businessId: string,
}>();

const loading = ref(false);
const saveLoading = ref(false);
const isProcessCompleted = ref(true);
const type = ref('acceptanceProcess4Reedit');

const commRef = ref();

const route = useRoute();


const formData = ref({
    id: '',
    zt: 10,
    yxbs: 1,
    processInsId:"",
});


onMounted(() => {
    loadForm();
});

// 加载数据
const loadForm = () => {
    nextTick(() => {
        loading.value = true;
        request.get(`/material/demand/${props.businessId}`).then((res) => {
            commRef.value.setData({
                ...res.data,
            });
            formData.value = res.data;
            loading.value = false;
        })
    });
}

//同意前操作
const beforeShowFn = () => {
    return new Promise((resolve, reject) => { 
        if(loading.value){
            reject();
        }
        resolve(true);
    })
}
//同意后操作
const afterAgreeFn = (processHandle: any) => { 
    saveLoading.value = true;
    commRef.value.getData(20).then((data: any) =>{
        request.post("/material/demand/reedit", {
            ...data,
            zt: 20,
            processHandle: {
                processInsId: props.processInsId,
                taskId: props.taskId,
                ...processHandle,
            }
        }).then(()=>{
            mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
            ElMessage.success("办理完毕/Completed Processing");
        }).catch(()=>{
        }).finally(()=>{
            saveLoading.value = false;
        })
    }).catch(()=>{saveLoading.value = false;});
}

// 流程操作改变
const handleOperateChanged = (operate: boolean)=>{
    isProcessCompleted.value = operate;
}

</script>
